<template>
    <div class="index-page">
        <!--首页中间商品类型以及轮播图（即广告横幅）-->
        <menu-banner></menu-banner>
        <div class="gray-page">
            <show-box></show-box>
            <!--新增一个模块-->
            <GoodRecommend></GoodRecommend>
            <h1 style="text-align: center;margin-top: 25px">-分类专区-</h1>
            <!--首页轮播图下方商品列表-->
            <goods-sale></goods-sale>
        </div>
    </div>
</template>

<script>
    import MenuBanner from '../components/index/MenuBanner'
    import GoodsSale from '../components/index/GoodsSale'
    import GoodRecommend from "../components/index/GoodRecommend";
    import ShowBox from "../components/index/showBox";

    export default {
        data() {
            return {}
        },
        components: {
            ShowBox,
            GoodRecommend,
            'MenuBanner': MenuBanner,
            'GoodsSale': GoodsSale,
        }
    }
</script>

<style lang="less">
    .index-page {
        .gray-page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: auto;
            background-color: #f5f5f5;
        }
    }
</style>